<template>
	<view class="user">
		<view class="header">
			<view class="icons">
				<image src="/static/user/setting.png" style="width: 48rpx; height: 48rpx" @click="gosetting"></image>
			</view>
			<view class="user-avater">
				<image  class="avater" v-if="!userinfo.avatar" src="/static/img/teacheravater.png" mode=""></image>
				<image  class="avater" v-else :src="`https://www.aikoolearn.com/video-dev${userinfo.avatar}`"></image>
				<view class="">
					<view class="user-title">{{userinfo.nickName}}</view>
					<view class="user-school">
						<image src="/static/user/hat.png" style="width: 42rpx; height: 42rpx"></image>
						<span >{{userinfo.dept.deptName}}</span>
					</view>
				</view>
			</view>
		</view>
		<view class="user-content">
			<wu-cell title="观看历史" isLink  url="/pages/watchHistory/index">
				<image class="icon-user" slot="icon" src="/static/user/history.png" mode=""></image>
			</wu-cell>
			<wu-cell title="收藏课程" isLink url="/pages/collection/index">
				<image class="icon-user" slot="icon" src="/static/user/collection.png" mode=""></image>
			</wu-cell>
			<wu-cell title="酷学证书" isLink url="/pages/certificate/index">
				<image class="icon-user" slot="icon" src="/static/user/zhengshu.png" mode=""></image>
			</wu-cell>
			<wu-cell title="客服与帮助" isLink>
				<image class="icon-user" slot="icon" src="/static/user/help.png" mode=""></image>
			</wu-cell>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			userinfo: {}
		};
	},
	onShow() {
		let user = uni.getStorageSync('userInfo');
		if(user){
			this.userinfo=JSON.parse(user)   
		}else{
			uni.reLaunch({
				url:'/pages/login/index'
			})
		}
	},
	methods: {
		gosetting() {
			uni.navigateTo({
				url: '/pages/setting/setting'
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.user {
	background-color: #f2f3f7;
	height: 100vh;
	::v-deep {
		.wu-cell__body {
			padding: 20px !important ;
		}
		.wu-cell__title-text {
			font-size: 24rpx;
		}
	}
}
.header {
	width: 100%;
	height: 534.351rpx;
	background-image: url('/static/user/bgi.jpg');
	background-repeat: no-repeat;
	background-size: 100%;
	position: relative;
	.icons {
		position: absolute;
		right: 32rpx;
		top: 114.504rpx;
	}
	.user-avater {
		position: absolute;
		left: 32rpx;
		top: 190.84rpx;
		display: flex;
		align-items: center;
		height: 119rpx;
		> :nth-child(2) {
			padding-left: 24rpx;
		}
		.avater {
			width:114.504rpx;
			height: 114.504rpx;
			border-radius: 50%;
		}
		.user-title {
			color: #23334d;
			font-size: 40rpx;
			width: 180.275rpx;
			text-align: center;
		}
		.user-school {
			width: 180.275rpx;
			height: 40.252rpx;
			margin-top: 9.542rpx;
			background-color: #14b19c;
			color: #fff;
			display: flex;
			align-items: center;
			border-radius: 200rpx 8rpx 8rpx 200rpx;
			span {
				display: inline-block;
				line-height: 40rpx;
				margin-left: 5px;
			}
		}
	}
}

.user-content {
	background: #ffffff;
	border-radius: 16rpx;
	margin: 24rpx 32rpx 0 32rpx;
	.icon-user {
		width: 40.802rpx;
		height: 40.802rpx;
	}
}
</style>
